/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit", // Tailwind 的 JIT（即时编译）模式
  separator: process.env.UNI_PLATFORM === "mp-weixin" ? "__" : ":", // 如果是小程序项目需要设置这一项，将 : 选择器替换成 __，之后 hover:bg-red-500 将改为 hover__bg-red-500
  corePlugins: {
    // 预设样式
    preflight: true, // 一般uniapp都有预设样式，所以不需要tailwindcss的预设(false), 我就用
    // 以下功能小程序不支持
    space: false, // > 子节点选择器
    divideWidth: false,
    divideColor: false,
    divideStyle: false,
    divideOpacity: false,
  },

  // 指定要处理的文件
  content: ["./src/**/*.{vue,js,ts,uts,uvue,nvue}", "./main.js", "./main.ts", "./App.vue", "./index.html"],
  theme: {
    // 字号，使用 App.vue 中的 --x-font-size 样式变量配置
    // fontSize(config) {
    //   const list = ["2xs", "xs", "sm", "base", "md", "lg", "xl", "2xl", "3xl"];
    //   let result = {};
    //   list.forEach((it) => {
    //     result[it] = `var(--x-font-size-${it})`;
    //   });
    //   return result;
    // },
    fontSize: {
      xs: ["24rpx", "38rpx"],
      sm: ["28rpx", "40rpx"],
      base: ["32rpx", "48rpx"],
      lg: ["40rpx", "56rpx"],
      xl: ["48rpx", "64rpx"],
      xxl: ["56rpx", "72rpx"],
      oxl: ["80rpx", "88rpx"],
      // -------- 全用rpx
      // sm: ["0.8rem", "1rem"],
      // base: ["1rem", "1.2rem"],
      // lg: ["1.1rem", "1.3rem"],
      // xl: ["1.2rem", "1.4rem"],
      // xxl: ["1.4rem", "1.6rem"],
      // oxl: ["2rem", "2.5rem"],
    },
    extend: {
      // 间距，tailwindcss中默认间距是rem单位，可以统一设置为uniapp的rpx单位。
      // 类似的设置根据项目需求自己调整一下就好了，没必要去安装别人的预设，其实主要是小程序不兼容的css比较多，H5和App基本都直接兼容tailwindcss默认的预设
      spacing(config) {
        /**
         * @f 因为之前的项目都是rem， 所以这里不改默认 p-* 的用法， 
         *  而是使用新的语法， 比如 p-4 = (padding: 1rem = padding: 32rpx) = p-32rpx
         */
        let result = { 0: '0' }
        /**
         * 允许的数值大一些也无所谓，最后打包tailwindcss会摇树优化，未使用的样式并不会打包
         *  @f 但建议 使用时 尽量使用 10rpx 的倍数，减少打包后文件大小
         */
        for (let i = 1; i <= 300; i++) {
          result[`${i}rpx`] = `${i}rpx`;
        }
        return result
      },
      // 增加颜色板，现在主流UI组件库大都是采用css变量实现定制主题，所以这里引用了全局的css变量，这个css变量的定义位置可以在 App.vue 中 page{} 选择器下
      // 其实tailwindcss只是一个css工具，不必局限于它内部提供的东西，灵活运用css变量这些特性完全可以整合出自己的生产力工具
      colors: {
        primary: "var(--x-color-primary)",
        tips: "var(--x-color-tips)",
      },
    },
  },
  plugins: [],
  presets: [
    require('tailwindcss-rem2px-preset').createPreset({
      // 32 意味着 1rem = 32rpx
      fontSize: 32,
      // 转化的单位,可以变成 px / rpx
      unit: 'rpx'
    })
  ],
};
